<template>
  <div>
    <h1>配置属性参数说明</h1>
    <el-card header="操作右侧的属性面板，可以看到数据变动">
      <ConfigCell />
    </el-card>
    <el-card header="组件参数对照表">
      <el-table :data="configTable" style="width: 100%" size="medium" border>
        <el-table-column prop="param" label="属性" width="300"></el-table-column>
        <el-table-column prop="required" label="是否必填" width="100" align="center" />
        <el-table-column prop="remark" label="说明">
          <template slot-scope="scope">
            <span v-html="scope.row.remark"></span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 右侧表单属性 -->
    <el-card header="表单参数对照表">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-table :data="formTable" style="width: 100%" size="medium" border>
            <el-table-column prop="param" label="属性" width="300"></el-table-column>
            <el-table-column prop="required" label="是否必填" width="100" align="center" />
            <el-table-column prop="remark" label="说明"></el-table-column>
            <!-- <el-table-column prop="value" label="默认值"></el-table-column> -->
          </el-table>
        </el-col>
        <el-col :span="8">
          <FormGeneratorAttrForm :formConf.sync="formAttrData" />
        </el-col>
      </el-row>
    </el-card>

    <el-card header="完整配置数据">
      <div class="introduce">在config.js以json的形式声明：</div>
      <Code :code="jsonData" />
    </el-card>
  </div>
</template>

<script>
import Code from "@/views/coms/components/Code";
import ConfigCell from "./components/configCell";
import { configTable, formTable } from "@/utils/comsData";
import {
  formConf,
  inputComponents,
  selectComponents,
  layoutComponents
} from "@/components/formGenerator/utils/config";

import FormGeneratorAttrField from "@/components/formGenerator/components/formGeneratorAttrField.vue";
import FormGeneratorAttrForm from "@/components/formGenerator/components/formGeneratorAttrForm.vue";
import { deepClone } from "../../components/formGenerator/utils";
export default {
  components: {
    Code,
    ConfigCell,
    FormGeneratorAttrField,
    FormGeneratorAttrForm
  },
  data() {
    return {
      jsonData: deepClone({
        ...formConf,
        list: [...inputComponents, ...selectComponents, ...layoutComponents]
      }),
      activeConfig: inputComponents[0],
      formAttrData: formConf,
      configTable,
      formTable
    };
  }
};
</script>

<style></style>
